<template>
    <NDrawer v-model:show="visible" width="80%" placement="right">
        <NDrawerContent title="用户详情">
            <NDescriptions title="基础信息" label-placement="left">
                <NDescriptionsItem>
                    <template #label>UID</template>
                    {{ detail?.uid }}
                </NDescriptionsItem>
                <NDescriptionsItem>
                    <template #label>手机号</template>
                    {{ detail?.mobileNumber }}
                </NDescriptionsItem>
                <NDescriptionsItem>
                    <template #label>邮箱</template>
                    {{ detail?.email }}
                </NDescriptionsItem>
                <NDescriptionsItem>
                    <template #label>邀请码</template>
                    {{ detail?.inviteCode }}
                </NDescriptionsItem>
                <NDescriptionsItem>
                    <template #label>创建时间</template>
                    {{ detail?._createdAt }}
                </NDescriptionsItem>
            </NDescriptions>
            <NDivider />
            <NDescriptions title="KYC证件" label-placement="left">
                <NDescriptionsItem>
                    <NFlex>
                        <NImage width="100" :src="detail?.certificateImageFront" />
                        <NImage width="100" :src="detail?.certificateImageBack" />
                    </NFlex>
                </NDescriptionsItem>
            </NDescriptions>
            <NDivider />
            <NDescriptions title="收货信息" label-placement="left">
                <NDescriptionsItem>
                    <template #label>姓名</template>
                    {{ detail?.petitioner }}
                </NDescriptionsItem>
                <NDescriptionsItem>
                    <template #label>电话</template>
                    {{ detail?.authMobileNumber }}
                </NDescriptionsItem>
                <NDescriptionsItem>
                    <template #label>住宅地址</template>
                    {{ detail?.receiverAddress }}
                </NDescriptionsItem>
            </NDescriptions>
            <NDivider />
            <NDescriptions title="操作" label-placement="left">
                <NDescriptionsItem>
                    <template #label>启用</template>
                    <NTag v-if="detail?.agentStatus === 1" size="small" type="success">可用</NTag>
                    <NTag v-if="detail?.agentStatus === 2" size="small" type="error">禁止</NTag>

                    <NSwitch
                        class="ml-2"
                        v-model:value="status"
                        size="small"
                        :unchecked-value="2"
                        :checked-value="1"
                        :loading="statusLoading"
                        @update:value="handleStatusUpdate"
                    />
                </NDescriptionsItem>
            </NDescriptions>
        </NDrawerContent>
    </NDrawer>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useMessage } from 'naive-ui'
import { queryAgentDetail, updateAgentStatus } from '@/api/user'
import dayjs from 'dayjs'

defineOptions({
    name: 'DetailDrawer'
})

const props = defineProps<{
    userId: number | undefined
}>()
const emits = defineEmits<{
    refresh: []
}>()

const visible = defineModel<boolean>({
    required: true
})

const message = useMessage()
const statusLoading = ref(false)
const status = ref<Api.User.AgentDetail['agentStatus']>(1)
const handleStatusUpdate = async (value: Api.User.AgentDetail['agentStatus']) => {
    statusLoading.value = true
    const [err, res] = await updateAgentStatus(props.userId!, value)
    statusLoading.value = false
    if (!err && res) {
        message.success('状态更新成功')
        queryDetail()
        emits('refresh')
    }
}

const detail = ref<Api.User.AgentDetail | null>(null)
const queryDetail = async () => {
    if (!props.userId) return
    const [err, res] = await queryAgentDetail(props.userId)
    if (!err && res) {
        res._createdAt = dayjs(res.createdAt * 1000).format('YYYY-MM-DD')
        detail.value = res
        status.value = res.agentStatus
    }
}

watch(visible, newVal => {
    if (newVal) {
        queryDetail()
    }
})
</script>
